import React, {Component} from 'react';
import {Input, Button, Row, Col} from 'antd';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmap';

class MapComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editVisible: false,
            editConfirmLoading: false,
            data: {
                address: '广东省佛山市三水区xxxxxx',
                latitude: '23.3333334',//纬度
                longitude: '150.333335'//经度
            },
            position: {},
            BMap: window.BMap,
            map: {}
        };
    };

    render() {
        return (
            <Row>
            <div>
                <Row>
                    <Col span={21}>
                        <Input placeholder="请输入" id='input'/>
                    </Col>
                    <Col span={3} align="right">
                        <Button style={{marginRight: 0}} type="primary" onClick={() => this.handleSearch()}>搜索</Button>
                    </Col>
                </Row>
                <div style={{width: '100%', height: '400px', border: '0px solid gray', marginTop: '20px'}}
                     id="container">
                </div>
            </div>
            </Row>
        )
    };

    componentDidMount() {
        //创建Map实例
        const BMap = this.state.BMap;
        let map = new BMap.Map("container");
        this.setState({map});

        let locationData=this.props.locationData;
        //设置地图中心点
        let point = new BMap.Point(locationData.longitude, locationData.latitude);
        map.centerAndZoom(point, 11);
        let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
                new BMap.Size(23, 25), {
                    offset: new BMap.Size(10, 25),
                    imageOffset: new BMap.Size(0, 0 - 11 * 25)
                });
        let marker = new BMap.Marker(point, {icon: myIcon});
        map.addOverlay(marker);
        //添加鼠标滚动缩放
        map.enableScrollWheelZoom();

        //添加缩略图控件
        map.addControl(new BMap.OverviewMapControl({isOpen: false, anchor: 'BMAP_ANCHOR_BOTTOM_RIGHT'}));
        //添加缩放平移控件
        map.addControl(new BMap.NavigationControl());
        //添加比例尺控件
        map.addControl(new BMap.ScaleControl());
        //添加地图类型控件
        //map.addControl(new BMap.MapTypeControl());
        const _this = this;
        const geoc = new BMap.Geocoder();
        //点击地图，获取经纬度坐标
        map.addEventListener("click", function (e) {
            var pt = e.point;
            geoc.getLocation(pt, function (rs) {
                var addComp = rs.addressComponents;
                let address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                let data = {
                    address: address,
                    latitude: e.point.lat,
                    longitude: e.point.lng
                };
                _this.props.getPoint(data);
            });
        });
    };

    componentDidUpdate() {
        setTimeout(() => {
            const BMap = this.state.BMap;
            let map = this.state.map;
            let locationData = this.props.locationData;
            let longitude = locationData.longitude;
            let latitude = locationData.latitude;
            if (!longitude || longitude === '' || !latitude || latitude === '') {
                longitude = '113.128438';
                latitude = '23.016184';
            }
            //设置地图中心点
            let point = new BMap.Point(longitude, latitude);
            let myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",
            new BMap.Size(23, 25), {
                offset: new BMap.Size(10, 25),
                imageOffset: new BMap.Size(0, 0 - 11 * 25)
            });
            let marker = new BMap.Marker(point, {icon: myIcon});
            map.clearOverlays();
            map.addOverlay(marker);
            map.panTo(point);
        }, 300);

    }


    handleSearch() {
        const value = document.getElementById('input').value;
        const map = this.state.map;
        const BMap = this.state.BMap;
        var local = new BMap.LocalSearch(map, {
            renderOptions: {map: map}
        });
        local.search(value);
    };
};

export default MapComponent;